<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
</head>

<body>

  <div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>

  <style>
    html {
      color: black;
      font-family: sans-serif;
    }

    body {
      margin: 0;
    }

    .hero {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: black;
    }

    h1 {
      text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
      font-size: 100px;
    }
  </style>

  <script>
    let hero = document.querySelector(".hero");
    let text = hero.querySelector("h1");
    let viewHeight = window.innerHeight;
    let viewWidth = window.innerWidth;
    // let walk = 500;
    function handleMove(e) {
      const { offsetWidth: width, offsetHeight: height } = hero;
      let { offsetX: x, offsetY: y } = e;
      let xWalk = Math.floor(width - x);
      let yWalk = Math.floor(height - y);

      text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;


    }
    hero.addEventListener("mousemove", handleMove)
  </script>
</body>

</html>